<template>
  <!-- 保全信息 -->
  <div>
    <h4>保全记录</h4>
    <Table :columns="columns" :data="tableData" :loading="isLoading" style="margin-top:10px">
      <template slot-scope="{ row }" slot="edorStateName">
        <!-- <span v-if="row.edorStateName == '成功' || row.edorStateName == '失败'"
          class="edorStateName ed">{{ row.edorStateName }}</span>
        <span v-else class="edorStateName ing">{{ row.edorStateName }}</span> -->
        <span v-if="row.edorStateName == '已完成' || row.edorStateName == '已结束'" class="edorStateName ed">{{
          row.edorStateName }}</span>
        <span v-else-if="row.edorStateName == '处理中'" class="edorStateName ing">{{ row.edorStateName }}</span>
        <span v-else class="edorStateName clo">{{ row.edorStateName }}</span>
      </template>
    </Table>
    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.pageIndex" :page-size="ipagination.pageSize"
      transfer></Page>
  </div>
</template>

<script>
import { loadResourcesMixin } from "../../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../../util/mixins/tableChangeMixin";
export default {
  name: "preservationInfo",
  mixins: [loadResourcesMixin, tableChangeMixin],
  data() {
    return {
      mixinData: {
        tableAxios: "selectEdorValue",
      },
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
        },
        {
          title: "保全名称",
          key: "edorName",
          align: "center",
        },
        {
          title: "保全受理编号",
          key: "edorAcceptNo",
          align: "center",
        },
        {
          title: "申请日期",
          key: "edorAppDate",
          align: "center",
        },
        {
          title: "保全完成日",
          key: "edorValidate",
          align: "center",
        },
        {
          title: "保全状态",
          key: "edorStateName",
          // slot: "edorStateName",
          align: "center",
          width: "120",
        },
      ],
    };
  },
  created() {
    this.form.contNo = this.$route.query.contNo;
    // this.form.contNo =  "712202085385069";
  },
  methods: {
    tableThen(res) {
      this.tableData = res.data;
      this.ipagination.total = +res.data[0].total;
    },
  },
};
</script>
<style scoped>
.edorStateName {
  padding: 10px;
}

.clo {
  color: #999999;
  background: #EEEEEE;
}

.ed {
  background: rgba(20, 213, 149, 0.15);
  color: #14d595;
}

.ing {
  background: #FFDCDC;
  color: #ff4722;
}
</style>